<template>
    <div>
        <div class="orderItem" v-for="item in props.orderList" :key="item.id">
            <div class="header">
                <p class="order_createTime">订单时间：{{ item.created_at }}</p>
                <p>{{ transformStatus(item.status) }}</p>
            </div>
            <div v-for="item2 in item.order_goods_infos" :key="item2.id">
                <van-card :num="item2.count" :price="(item2.goods_info?.price || 0).toFixed(2)"
                    :desc="item2.goods_info?.detail_info" :title="item2.goods_info?.name"
                    :thumb="item2.goods_info?.pic_url" />
            </div>
            <div class="footer">
                <div v-show="item.pay_type != 0" class="payType">
                    支付方式：{{ transformPayType(item.pay_type) }}
                </div>
                <div class="allPrice">
                    总金额：￥{{ (item.price).toFixed(2) }}
                </div>

            </div>
        </div>
    </div>
</template>
    
<script setup>
import { defineProps } from 'vue';

let props = defineProps({
    orderList: {
        type: Array,
        default: [],
    }
})

// 转换订单状态
const transformStatus = status => {
    switch (status) {
        case 1:
            return '待支付';
        case 2:
            return '待发货';
        case 3:
            return '待收货';
        case 4:
            return '待评价';
    }
};
// 转换支付方式
const transformPayType = type => {
    switch (type) {
        case 1:
            return '微信';
        case 2:
            return '支付宝';
        case 3:
            return '云闪付';
    }
};


</script>
    
<style lang="scss" scoped>
.orderItem {
    background-color: #fff;
    padding: 10px;
    margin: 10px;
    border-radius: 12px;

    .header {
        display: flex;
        color: #2f3640;
        font-size: .32rem;
        justify-content: space-between;

        .order_createTime {
            color: #353b48;
        }
    }

    .footer {
        height: .4rem;
        font-size: .26667rem;
        color: #2f3640;
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        margin: 0.05333rem;
        .payType{
            float: left;
        }
        .allPrice{
            float: right;
        }
    }
}</style>